<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="所属项目" prop="review_project_id">
                <el-select v-model="ruleForm.review_project_id" size="small" style="width: 100%" clearable
                           placeholder="请选择所属项目" @change="projectChange" @clear="projectClear">
                    <el-option
                            v-for="(item) in projectArr"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="样 本 点" prop="new_sample_id">
                <el-select v-model="ruleForm.new_sample_id" :disabled="sampleDisable" size="small"
                           ref="sampleRef" style="width: 100%"
                           clearable
                           filterable
                           allow-create
                           default-first-option
                           placeholder="请选择样本点">
                    <el-option
                            v-for="(item) in sampleData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择社区" prop="community_id">
                <el-select v-model="ruleForm.community_id" filterable clearable placeholder="请选择社区"
                           style="width: 100%;">
                    <el-option v-for="(item,index) in selectTypeData" :key="index" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目指标" prop="project_target_id">
                <el-select v-model="ruleForm.project_target_id" filterable clearable placeholder="请选择项目指标"
                           style="width: 100%;">
                    <el-option v-for="(item,index) in projectTargetData" :key="index" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="问题描述" prop="remark">
                <el-input size="small" type="textarea" v-model="ruleForm.remark" :rows="4" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="file">
                <el-upload
                        ref="uploadImg"
                        :action="upload.url"
                        :headers="upload.headers"
                        :name="upload.name"
                        :accept="upload.accept"
                        :limit="3"
                        multiple
                        :on-remove="(file, fileList)=>{return handleRemove(file)}"
                        :on-success="(response, file, fileList)=>{return onSuccess(response, file, fileList)}"
                        list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        projectArr: {
            type: [String, Object, Array],
            default: ``
        },
        selectTypeData:{
            type: [String, Object, Array],
            default: ``
        },
        projectTargetData:{
            type: [String, Object, Array],
            default: ``
        }
    },
    data() {
        const validate = (rule, value, callback) => { // 图片验证
            if (!this.hasFmt) {
                callback(new Error('请上传图片'));
            } else {
                callback();
            }
        }
        return {
            upload: {
                url: this.$action_url + 'admin/update_img_url',
                accept: 'image/*',
                headers: {Authorization: window.sessionStorage.getItem('token')},
                name: 'file',
            },
            hasFmt: false,
            sampleDisable: true,
            ruleForm: {
                review_project_id: '',
                new_sample_id: '',
                remark: '',
                community_id:'',
                project_target_id:'',
                img_path: []
            },
            rules: {
                review_project_id: [
                    {required: true, message: '请选择项目', trigger: 'change'}
                ],
                new_sample_id: [
                    {required: true, message: '请选择样本点', trigger: 'change'}
                ],
                remark: [
                    {required: true, message: '请输入案件描述', trigger: 'blur'},
                ],
                file: [
                    {required: true, validator: validate, trigger: 'change'}  // 图片验证
                ],

            },
            sampleData: []
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (!valid) return this.$message.error('输入不合法')
                this.$emit('saveCase', this.ruleForm)
            });
        },
        resetForm(formName) {
            this.$refs['uploadImg'].clearFiles();
            this.$refs[formName].resetFields();
        },
        clearForm() {
            this.$refs['uploadImg'].clearFiles();
            this.$refs['ruleForm'].resetFields();
        },
        //项目下拉选择
        projectChange(e) {
            if (e) {
                this.getCaseSample(e)
            }
        },
        //根据项目选择对应的样本点
        async getCaseSample(e) {
            const {data: res} = await this.$http.get(`admin/search_sample/${e}`)
            if (res.code !== 200) {
                this.sampleDisable = true
                this.ruleForm.review_project_id = ''
                return this.$message.error(res.data.message)
            }
            this.sampleDisable = false
            this.sampleData = res.data.list;
        },
        projectClear() {
            this.sampleData = []
            this.ruleForm.new_sample_id = ''
            this.sampleDisable = true
        },
        onSuccess(response, file) {
            if (response.code !== 200) return this.$message.error('上传失败')
            const picInfo = {
                img_path: 'storage/' + response.data.list.path,
                domain: this.$action_url,
                name: file.name,
                url: file.url
            }
            this.hasFmt = true
            this.ruleForm.img_path.push(picInfo)

        },
        handleRemove(file) {
            const filePath = file.response.data.list.path
            //从数组中找到图片对应的索引值
            const i = this.ruleForm.img_path.findIndex(x => x.img_path === filePath)
            //通过数组的splice方法 把图片从img_path 数组中删除
            this.ruleForm.img_path.splice(i, 1)
            if (this.ruleForm.img_path.length === 0) {
                this.hasFmt = false
            }
        }
    }
}
</script>

<style scoped>

</style>
